<template>
  <q-page class="cc-admin">
    <div class="cc-home">
      <div class="col-shrink cc-home-stat row">
        <stat-box title="总销售额" amount="￥126,560" class="q-mr-md">
          <div class="cc-font">
            周同比 %12
            <q-icon name="mdi-triangle" class="text-red q-mr-md" />日同比 11%
            <q-icon name="mdi-triangle" class="text-green rotate-180" />
          </div>
          <template v-slot:stat>
            <div class="cc-font">日均销售额￥ 234.56</div>
          </template>
        </stat-box>
        <stat-box title="订单量" amount="8,864" class="q-mr-md">
          <line-chart />
          <template v-slot:stat>
            <div class="cc-font">日订单量 3,274</div>
          </template>
        </stat-box>
        <stat-box title="支付笔数" amount="6,560" class="q-mr-md">
          <bar-chart />
          <template v-slot:stat>
            <div class="cc-font">转化率 60%</div>
          </template>
        </stat-box>
        <stat-box title="运营活动效果" amount="78%">
          <q-linear-progress rounded size="lg" :value="0.65" color="secondary" class="q-mt-sm" />
          <template v-slot:stat>
            <div class="cc-font">
              同周比12%
              <q-icon name="mdi-triangle" class="text-green q-mr-md rotate-180" />日环比80%
              <q-icon name="mdi-triangle" class="text-red" />
            </div>
          </template>
        </stat-box>
      </div>
      <div class="q-mt-sm row cc-home-sale-stat bg-white">
        <div class="col column">
          <q-tabs
            v-model="statTab"
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
            align="left"
            narrow-indicator
          >
            <q-tab name="amount" label="销售额" />
            <q-tab name="trend" label="销售趋势" />
          </q-tabs>

          <q-separator />

          <q-tab-panels v-model="statTab" animated class="col column">
            <q-tab-panel name="amount" class="col cloumn">
              <amount-chart />
            </q-tab-panel>
            <q-tab-panel name="trend" class="col cloumn">
              <amount-trend />
            </q-tab-panel>
          </q-tab-panels>
        </div>
        <div class="column" style="width:500px;">
          <div class="row no-wrap q-pa-md">
            <q-btn-toggle
              v-model="statType"
              :spread="false"
              class="col"
              no-caps
              unelevated
              toggle-color="primary"
              color="white"
              text-color="primary"
              :options="[
              {label: '今日', value: 'day'},
              {label: '本周', value: 'week'},
              {label: '本月', value: 'month'},
              {label: '本年', value: 'year'}
            ]"
            />
            <div class="column" style="width: 200px">
              <q-field outlined dense>
                <template v-slot:control>
                  <div class="full-width row no-wrap">
                    <div class="col text-center cc-font">{{model.from?model.from:'开始日期'}}</div>
                    <div>~</div>
                    <div class="col text-center cc-font">{{model.to?model.to:'结束日期'}}</div>
                  </div>
                </template>
                <q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
                  <div>
                    <q-date v-model="model" range />
                  </div>
                </q-popup-proxy>
              </q-field>
            </div>
          </div>
          <q-list class="col bg-white">
            <q-item class="q-my-xs" dense v-for="data in statList" :key="data.id">
              <q-item-section avatar>
                <q-icon
                  size="sm"
                  :name="'mdi-numeric-'+data.id+'-circle'+(data.id>3?'-outline':'')"
                />
              </q-item-section>
              <q-item-section>
                <q-item-label class="text-left">白鹭岛 {{data.id}} 号店</q-item-label>
              </q-item-section>
              <q-item-section side>{{data.amount}}</q-item-section>
            </q-item>
          </q-list>
        </div>
      </div>
      <div class="cc-home-bottom-sale q-mt-sm row">
        <div class="col column bg-white"><sale-step /></div>
        <div class="col q-mx-sm column bg-white"><sale-pie /></div>
        <div class="col column bg-white"><sale-parallel /></div>
      </div>
    </div>
  </q-page>
</template>

<script>
import StatBox from './widgets/statbox';
import LineChart from './widgets/topline';
import BarChart from './widgets/topbar';
import AmountChart from './widgets/centeramount';
import AmountTrend from './widgets/centertrend';
import SalePie from './widgets/bottomsalepie';
import SaleParallel from './widgets/bottomsaleparallel';
import SaleStep from './widgets/bottomsalestep';

export default {
  props: {
  },
  components: {
    StatBox, LineChart, BarChart, AmountChart, AmountTrend, SalePie, SaleParallel, SaleStep,
  },
  data() {
    return {
      statTab: 'amount',
      statType: 'day',
      date: '',
      model: { from: null, to: null },
      statList: [],
    };
  },
  created() {

  },
  mounted() {
    for (let i = 1; i < 8; i += 1) {
      this.statList.push({
        id: i,
        name: `白鹭岛 ${i} 号店`,
        amount: (1337.75 - Math.random() * 100 - i * 100).toFixed(2),
      });
    }
  },
  methods: {
  },
};
</script>

<style scoped lang="stylus">
.cc-home-stat
  min-height 150px
.cc-home
  background-color #f1f2f6
.cc-stat-tabs
  .q-tab__label
    font-size 36px !important
.cc-home-sale-stat
  height 330px
.cc-home-bottom-sale
  height 240px
</style>
